<template>
  <view class="question-page">
    <view class="header">
      <uni-icon class="back-icon" type="back" size="24" @click="goBack"></uni-icon>
      <text class="title">Java 基础面试题</text>
      <uni-icon class="more-icon" type="more" size="24" @click="showMoreOptions"></uni-icon>
    </view>
    <view class="question-content">
      <text class="question-text">{{ item?.text || '加载中...' }}</text>
      <view class="tags">
        <text class="tag">Java基础</text>
        <text class="tag">Java</text>
      </view>
      <view class="answer-button">
        <button class="answer-btn" @click="showAnswer">点击查看答案</button>
      </view>
    </view>
    <view class="footer">
      <view class="question-status">
        <text class="status-text">Java 基础面试题 ({{ currentIndex + 1 }}/ {{ questionList.length }})</text>
      </view>
      <view class="button-container">
        <button class="prev-button" @click="goToPrevious">上一题</button>
        <button class="next-button" @click="goToNext">下一题</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 模拟获取问题列表
const questionList = ref([
  { id: 1, text: '你认为 Java 的优势是什么？' },
  { id: 2, text: '什么是 Java 的多态特性？' },
  { id: 3, text: 'Java 中的参数传递是按值还是按引用？' },
  { id: 4, text: '接口和抽象类有什么区别？' },
  { id: 5, text: '为什么 Java 不支持多重继承？' },
  { id: 6, text: 'Java 中的序列化和反序列化是什么？' },
  { id: 7, text: '什么是 Java 中的不可变类？' },
  { id: 8, text: 'Java 中 Exception 和 Error 有什么区别？' },
  { id: 9, text: 'Java 面向对象编程与面向过程编程的区别是什么？' },
  { id: 10, text: 'Java 方法重载和方法重写之间的区别是什么？' },
  { id: 11, text: '什么是 Java 内部类？它有什么作用？' },
  { id: 12, text: 'JDK8 有哪些新特性？' }
]);

// 当前问题索引
const currentIndex = ref(0);

// 初始化当前问题
onMounted(() => {
  initQuestion();
});

// 初始化问题
function initQuestion() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;

  if (options && options.item) {
    try {
      item.value = JSON.parse(decodeURIComponent(options.item));
      currentIndex.value = findIndexById(item.value.id); // 找到当前问题在列表中的索引
    } catch (e) {
      console.error('Error parsing item:', e);
    }
  } else {
    item.value = questionList.value[currentIndex.value]; // 默认显示第一个问题
  }
}

// 查找问题 ID 对应的索引
function findIndexById(id) {
  return questionList.value.findIndex(q => q.id === id);
}

// 点击返回按钮
function goBack() {
  uni.navigateBack();
}

// 显示更多选项
function showMoreOptions() {
  console.log('Show more options');
}

// 显示答案
function showAnswer() {
  console.log(item.value.text);
}

// 跳转到上一题
function goToPrevious() {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    item.value = questionList.value[currentIndex.value];
  }
}

// 跳转到下一题
function goToNext() {
  if (currentIndex.value < questionList.value.length - 1) {
    currentIndex.value++;
    item.value = questionList.value[currentIndex.value];
  }
}

// 当前问题对象
const item = ref(questionList.value[currentIndex.value]);
</script>

<style scoped>
/* 样式部分 */
.question-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-icon, .more-icon {
  margin: 0 10rpx;
}

.title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
}

.question-content {
  padding: 20rpx;
}

.question-text {
  font-size: 28rpx;
}

.tags {
  display: flex;
  margin-top: 20rpx;
}

.tag {
  background-color: #f0f0f0;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  border-radius: 10rpx;
}

.answer-button {
  margin-top: 20rpx;
}

.answer-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  background-color: #ffcc00;
  border-radius: 40rpx;
  color: #fff;
}

.footer {
  padding: 20rpx;
  display: flex;
  flex-direction: column; /* 保持垂直布局 */
  align-items: center;
  border-top: 1px solid #eee;
}

.status-text {
  font-size: 28rpx;
  margin-bottom: 10rpx; /* 添加一些间距 */
}

.button-container {
  display: flex;
  justify-content: space-between; /* 按钮水平排列 */
  width: 100%; /* 使按钮容器宽度为100% */
}

.prev-button, .next-button {
  width: 48%; /* 按钮各占一半宽度 */
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  background-color: #ffcc00;
  border-radius: 40rpx;
  color: #fff;
  margin-bottom: 10rpx; /* 添加一些间距 */
}
</style>